@import '~ng-devui/styles-var/devui-var.scss';

.header-container {
  position: fixed;
  width: 64px;
  background-image: linear-gradient(179deg, #E9FBFF 0%, #F3F5FF 100%);
  height: 100%;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.header-bottom-menu {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 16px;
  .menu-item {
    height: 36px;
    width: 36px;
    margin-bottom: 8px;
    border-radius: $devui-border-radius-card;
    transition: all $devui-animation-duration-base $devui-animation-ease-in-out-smooth;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &:hover {
      background: $devui-base-bg;
      box-shadow: $devui-shadow-length-base $devui-light-shadow;

      svg path{
        fill: $devui-icon-fill-hover;
        stroke: none;
      }
    }
    a {
      display: flex;
      align-items: center;
    }
  }
}

:host ::ng-deep .menu-item:hover .header-language-switch,
:host ::ng-deep .header-top-menu .header-menu-container .header-menu-item .logo:hover,
:host ::ng-deep .header-top-menu .header-menu-container .menu-selected-item .logo{
  svg path{
    fill: $devui-icon-fill-hover;
    stroke: none;
  }
}

:host ::ng-deep .header-top-menu .header-menu-container .menu-selected-item .text,
:host ::ng-deep .header-top-menu .header-menu-container .header-menu-item .logo:hover + .text{
  color: $devui-text !important;
}


.expand-sidebar {
  width: 32px;
  height: 32px;
  margin-top: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: $devui-border-radius-card;
  transition: all $devui-animation-duration-base $devui-animation-ease-in-out-smooth;
  cursor: pointer;

  &:hover {
    background: $devui-base-bg;
    box-shadow: $devui-shadow-length-base $devui-light-shadow;

    svg path{
      fill: $devui-icon-fill-hover;
      stroke: none;
    }
  }
}

.mobile-header-container {
  display: flex;
  align-items: center;
  position: fixed;
  z-index: 1000;
  width: 100%;
  background-image: linear-gradient(179deg, #E9FBFF 0%, #F3F5FF 100%);
  .mobile-header-left {
    display: flex;
    align-items: center;
  }
  .mobile-hamburger {
    margin-left: 12px;
  }

  .expand-sidebar {
    margin-top: 0 !important;
    margin-left: 12px;
  }
}

.mobile-sider {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: fixed;
  top: 56px;
  left: 0;

  height: calc(100vh - 56px);
  width: 0;
  background-color: $devui-base-bg;
  transition: all 0.3s;
}

.mobile-sider-show {
  width: 242px !important;
  padding: 12px;
}

.mobile-bottom-menu-hidden {
  display: none;
}

.mobile-bottom-menu-show {
  display: block !important;
}
